
@use "./theme.scss";
@import "~normalize.css";

html {
  height  : 100%;
  overflow: hidden;
}

body {
  height  : 100%;
  overflow: auto;
  overscroll-behavior-y: none;
}

/**
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
html {
  box-sizing: border-box;
  line-height: 1;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/**
 * Forked from Tailwind CSS
 */

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * https://css-tricks.com/snippets/css/system-font-stack/
 */

html {
 font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

textarea {
  resize: vertical;
}

button,
[role="button"] {
  cursor: pointer;
  user-select: none;
}

table {
  border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: theme.$font-weight-bold;
}

/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */

a {
  color: inherit;
  text-decoration: inherit;
}

/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */

button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/**
 * Monospace font stack: https://css-tricks.com/snippets/css/font-stacks/
 */

pre,
code,
kbd,
samp {
 font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

/**
 * Make replaced elements `display: block` by default as that's
 * the behavior you want almost all of the time. Inspired by
 * CSS Remedy, with `svg` added as well.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img:-moz-broken {
  opacity: 0;
}

/**
 * Constrain images and videos to the parent width and preserve
 * their instrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
video {
  max-width: 100%;
  height: auto;
}

label {
  font-size: theme.$font-size-sm;
  font-weight: theme.$font-weight-bold;
}

body :focus, [type="button"]:focus {
  outline: none;
}

:global(.keyboard-user) :focus {
  box-shadow: 0 0 0 3px theme.$black;
}

/* We want svg icons to have title elements for screen readers, but we don't need to show their tooltips when they are inside buttons */
button svg {
  pointer-events: none;
}

/**
 * Breakpoint definitions for use wuth react-use-css-breakpoints
 * https://github.com/matthewhall/react-use-css-breakpoints
 */
body::before {
  content: "sm";
  display: none;
}

@media (min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
  body::before {
    content: "md";
  }
}

@media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
  body::before {
    content: "lg";
  }
}

@media (min-width: theme.$breakpoint-xl) and (min-height: theme.$breakpoint-vr) {
  body::before {
    content: "xl";
  }
}

@media (min-width: theme.$breakpoint-xxl) and (min-height: theme.$breakpoint-vr) {
  body::before {
    content: "xxl";
  }
}

// TODO: Add the rest of the base typography styles

h5 {
  font-size: theme.$font-size-sm;
}

label, small, strong {
  font-size: theme.$font-size-xs;
  font-weight: theme.$font-weight-bold;
}

small {
  color: theme.$darkgrey;
}

p, small, strong {
  line-height: 1.25;
}

a {
  color: theme.$blue;

  &:hover {
    color: theme.$blue-hover;
  }

  &:active {
    color: theme.$blue-pressed;
  }
}

hr {
  position: relative;
  width: 90%;
  border: none;
  border-bottom: 1px solid theme.$grey;
  margin: 16px 0;

  &:after {
    background: theme.$white;
    content: attr(data-or-text);
    padding: 0 4px;
    position: relative;
    color: theme.$black;
    font-size: theme.$font-size-sm;
    font-weight: theme.$font-weight-bold;
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
  }
}

input::placeholder {
  color: theme.$darkgrey;
}
